<template>
	<div id="listlottry">
		<div class="lottrycolumn" v-for="(item,key) in allgames"
			:key="key"
			@click="oninformation(item.cn)"
			>
			<img :src="'http://192.168.2.245:3000'+item.icon2">
			<span>{{item.cn}}</span>
 		</div>
		<div id="addimg" @click="addlottry=true">
			<i class="el-icon-plus"></i>
		</div>
		<addupload :addlottry="addlottry"/>
	<router-view/>
	</div>
</template>

<script>
	import addupload from "./addupload"
	export default{
		components:{addupload},
		data(){
			return {
				
				gamelist:[],
				addlottry:false
			}
		},
		computed:{
			allgames(){
				return this.$store.getters.allgames;
			}
		},
		methods:{
			
			oninformation(cn){
				this.$router.push({name:cn})
			}
		},
		mounted(){
			this.$store.dispatch("loadallgames",{api:this.$apis.allGames})
		}
	}
</script>

<style lang="scss" scoped>
	
	#listlottry{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: white;
		width: 100%;
		height: 100%;
		
		.lottrycolumn{
			
			display: flex;
			flex-direction: column;
			width: 100px;
			height: 100px;
			margin: 10px;
			img{
				width: 90px;
				height: 90px;
			}
		}
		
		#addimg{
			width: 100px;
			height: 100px;
			font-size: 30px;
			line-height: 100px;
			border: 1px dashed #333333;
			border-radius: 10px;
			margin: 10px;
		}
	}
</style>